<template>
  <div class="container">
    <div class="header">添加数据</div>
    <el-input
      style="margin-bottom: 16px"
      placeholder="请输入内容"
      v-model="addData.title"
    >
      <template #prepend>标题</template>
    </el-input>
    <el-input
      v-if="userinfo.limit == 0"
      style="margin-bottom: 16px"
      placeholder="请输入内容"
      v-model="addData.user"
    >
      <template #prepend>创建用户</template>
    </el-input>
    <el-input
      v-if="userinfo.limit == 0"
      style="margin-bottom: 16px"
      placeholder="请输入内容"
      v-model="addData.userName"
    >
      <template #prepend>用户昵称</template>
    </el-input>
    <el-input
      style="margin-bottom: 16px"
      placeholder="请输入内容"
      v-model="addData.mood"
    >
      <template #prepend>心情</template>
    </el-input>
    <div style="display: flex">
      <el-input
        :disabled="time"
        style="margin-bottom: 16px"
        placeholder="默认为当前时间、你也可以自定义：xxxx-xx-xx xx:xx:xx"
        v-model="addData.createTime"
      >
        <template #prepend>时间</template>
      </el-input>
      <el-button style="height: 40px" @click="changeTime" size="mini"
        >自定义</el-button
      >
    </div>

    <el-input
      style="margin-bottom: 16px"
      type="textarea"
      :autosize="{ minRows: 2, maxRows: 8 }"
      placeholder="请输入内容"
      v-model="addData.content"
    >
    </el-input>
    <el-input
      v-if="userinfo.limit == 0"
      style="margin-bottom: 16px"
      v-model="addData.limit"
      placeholder="请输入内容"
    >
      <template #prepend>权限</template>
    </el-input>

    <el-button style="width: 100%" @click="submitFun" plain>提 交</el-button>
  </div>
</template>

<script>
import { toRefs } from 'vue';
// eslint-disable-next-line no-unused-vars
import dataAddJS from "./dataAdd.js";

export default {
  name: "dataAdd",
  setup() {
    let {
      status,
      methodFun: { changeTime, submitFun },
    } = dataAddJS();
   let { addData, time, userinfo } = toRefs(status);
    return {
      changeTime,
      submitFun,
      addData,
      time,
      userinfo,
    };
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 700px !important;
  height: auto !important;
  box-sizing: border-box;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.3);
  margin: 0px auto;
  border-radius: 16px;
  box-shadow: 1px 2px 10px 2px #333;
  .header {
    line-height: 50px;
    font-size: 30px;
    text-align: center;

    margin-bottom: 20px;
    font-family: "kaiti";
  }
}
</style>
